<script setup lang="ts">
import { ref, markRaw, onMounted, onUnmounted } from "vue";
import blocksDom from "@/assets/svg/machine/blocks.svg?component";
import { getLunar } from "chinese-lunar-calendar";

const currentTime = ref("");
const currentDate = ref("");
const currentDay = ref("");

const iconComList = {
  blocksDom: markRaw(blocksDom)
};

const getTimes = () => {
  setInterval(getTimeInterval, 1000);
};

const getTimeInterval: any = () => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  // let monthStr = date.getMonth() + 1 < 10 ? "0" + date.getMonth() + 1 : date.getMonth() + 1;
  let month = date.getMonth() + 1;
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  // let dayStr = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let day = date.getDate();
  let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); // 获取时
  let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); // 获取分
  let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); // 获取秒
  currentTime.value = hour + ":" + minutes + ":" + seconds;
  const getDay = getLunar(year, month, day);
  currentDate.value = getDay.dateStr;
  currentDay.value = year + "年" + month + "月" + day + "日";
};

onMounted(() => {
  getTimes();
});

onUnmounted(() => {
  if (currentTime.value) {
    clearInterval(getTimeInterval);
  }
});
</script>

<template>
  <div>
    <div class="time_box">
      <div class="time_date">
        <div class="time">{{ currentTime }}</div>
        <div class="date">
          <span>{{ currentDay }}</span>
          &nbsp;
          <span>{{ currentDate }}</span>
        </div>
      </div>
      <component :is="iconComList.blocksDom" class="content-icon" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.time_box {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-content: space-between;
  padding-right: 16px;

  .time_date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    // font-family:
    //   PingFangSC-Medium,
    //   PingFang SC;
    font-weight: 500;

    .time {
      height: 44px;
      margin-bottom: 8px;
      font-size: 44px;
      line-height: 44px;
      color: #13c2c2;
    }

    .date {
      height: 20px;
      font-size: 14px;
      line-height: 20px;
      color: #7997a8;
    }
  }
}
</style>
